<template>
  <div v-if="info">
    <Head>
      <Title v-if="info.name">{{ info.name }}</Title>
      <Meta v-if="info.keywords" name="keywords" :content="info.keywords" />
      <Meta v-if="info.description" name="description" :content="info.description" />
    </Head>
    <el-card class="info-box" shadow="hover">
      <template #header>
        <div class="list-title">{{ info.article_to.name }}</div>
      </template>
      <div class="content">
        <h1 class="con-tilte">{{ info.name }}</h1>
        <div class="con-header">
          <div class="con-header-time">发布时间：{{ info.date_value }}</div>
          <div class="con-header-weig">{{ info.visits }}人已围观</div>
          <div class="con-header-tag" v-if="info.label_to.length">
            <el-tag
              v-for="(item, index) in info.label_to"
              :type="tagTypeList[index % 4]"
              :key="index"
              effect="dark"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
        <div class="con-info-description" v-if="info.description"
          ><b>简介</b> {{ info.description }}</div
        >
        <div v-html="info.content" class="con-text"></div>
        <div class="con-share" v-if="configInfoData.reprint_statement"
          ><b>转载：</b>{{ configInfoData.reprint_statement }}</div
        >
        <div class="nextinfo">
          <p v-if="info.s_info"
            >上一篇：<NuxtLink :to="'/details/' + info.s_info.id">{{
              info.s_info.name
            }}</NuxtLink></p
          >
          <p v-if="info.x_info"
            >下一篇：<NuxtLink :to="'/details/' + info.x_info.id">{{
              info.x_info.name
            }}</NuxtLink></p
          >
        </div>
      </div>
    </el-card>
  </div>
  <Empty v-else />
</template>
<script lang="ts" setup>
import { articleDetails } from '@/api/articleDetails';
const configInfoData = useConfig();
const route = useRoute();
let id: any = route.params.id;
id = id.replace('.html', '');
let info: any = null;
const tagTypeList: any = ['success', 'info', 'warning', 'danger'];
const articleDetailsRes = await articleDetails({ id: id });
if (articleDetailsRes.status === 20000) {
  info = articleDetailsRes.data;
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>

<style>
p {
  margin-bottom: 1rem !important;
}
</style>
